<template>
  <el-menu default-active="2" class="layout-1" 
  :collapse="collapse"
    @open="handleOpen" @close="handleClose">
    <el-sub-menu index="1">
      <template #title>
        <el-icon>
          <location />
        </el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item index="1-1">角色管理</el-menu-item>
        <el-menu-item index="1-2">用户管理</el-menu-item>
        <el-menu-item index="1-3">部门管理</el-menu-item>
        <el-menu-item index="1-4">权限管理</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <span>其它管理</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import {
  Menu as IconMenu,
  Location,
} from '@element-plus/icons-vue'
import { computed } from 'vue';
import { useGlobalStore } from '@/stores/useGlobalStore.ts'

const globalStore = useGlobalStore();
const collapse = computed(() => globalStore.isCollapse);


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped lang="scss">

.el-sub-menu {
  .el-menu-item{
    :deep(&.is-active) {
      color: #8400ff !important;

      :deep(.el-icon) {
        color: #8400ff;
      }
    }

    :deep(.el-sub-menu__title) {
      &:hover {
        color: #8400ff !important;
      }
    }
  }
   
}
</style>